<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">简历库</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}"> > {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div class="interviewtrack1 right1" style="float: right;margin-top: 11px;">
            <el-input
              v-model.trim="searchword"
              size="small"
              placeholder="请输入内容"
              @keyup.enter.native="search"
            >
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;"  @click="search"></i>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" style="padding-top: 15px;">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            @current-change="handleCurrentChange"
          >
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <span v-if="scope.row.fileAddress !== null && scope.row.fileAddress !== ''"><a class="other" :href="scope.row.group+'/'+scope.row.fileAddress" target="_blank">{{scope.row.name}}</a></span>
                <span class="other" v-if="(scope.row.fileAddress == null || scope.row.fileAddress == '') && scope.row.domHtml !== null" @click="watchResume(scope.row.domHtml)">{{scope.row.name}}</span>
                <span  v-if="(scope.row.fileAddress == null || scope.row.fileAddress == '') && scope.row.domHtml == null" style="color: #757575;">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="简历来源"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.resumeTableId !== null" @click="seedetails(scope.row)" class="other">{{scope.row.type}}</span>
                <span v-if="scope.row.resumeTableId == null" style="color: #757575;">{{scope.row.type}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="联系电话"
            >
              <template slot-scope="props">
                <div v-if="props.row.tel">
                  <span v-if="props.row.tel.indexOf('http') == -1">{{props.row.tel}}</span>
                  <a v-else :href="props.row.tel" target="_Blank">电话链接</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="职位"
              prop="postName"
            >
            </el-table-column>
            <el-table-column
              label="地区"
              prop="area"
            >
            </el-table-column>
            <el-table-column
              label="工作年限"
              prop="jobTime"
            >
            </el-table-column>
            <el-table-column
              label="学校"
              prop="school"
            >
            </el-table-column>
            <el-table-column
              label="学历"
              prop="education"
            >
            </el-table-column>
            <el-table-column
              label="专业"
              prop="major"
            >
            </el-table-column>
            <el-table-column
              label="期望薪资"
              prop="salaryExpectation"
            >
            </el-table-column>
            <el-table-column label="上传时间">             
              <template slot-scope="scope">
                <span>{{scope.row.createTime | converTime("YYYY-MM-DD HH:mm")}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="专员姓名"
              prop="importUser"
            >
            </el-table-column>
            <el-table-column type="expand" width="100" label="功能区">
              <template slot-scope="scope">
                <div style="color: #4bb2fc;padding-left: 68px;width: 100%;float: left;text-align: left;">
                  <span >{{scope.row.sex}} | </span>
                  <span >{{scope.row.age}} | </span>
                  <span v-if="scope.row.currentResidence">{{scope.row.currentResidence}} | </span>
                  <span >{{scope.row.education}}</span>
                </div>
                <div class="container">
                  <div>{{scope.row.educationExperience}}</div>
                  <div v-for="(item,index) in scope.row.work" :key="index">{{item}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <el-dialog
      title="简历"
      class="resume screenresume1"
      :visible.sync="dialogVisible"
      :before-close="diaClose"
    >
      <div v-html="textHtml">
    
      </div>
    </el-dialog>
    
    
    <div v-if="type == 1">
      <resume-detail :detail-code="detailcode" v-show="addShow"></resume-detail>
    </div>
    
  
  </div>
</template>

<script>
  import axios from 'axios'
  import ResumeDetail from './resumedetail'

  
  export default {
    name: "resumelibrary",
    data() {
      return {
        tableData: [],
        currentPage: 1,
        currentRow : null,
        pagesize: 15,
        totalcount: null,
        detailcode: null,
        type: null,
        addShow: false,
        secondshow: false,
        dialogVisible : false,
        textHtml : null,
        searchword : '',
        time:{
          date:''
          }
      }
    },
    created() {
      this.getPushedResumes();
    },
    methods: {
      getPushedResumes() {
        //获取已推送简历
        axios.post(this.url + '/esresult/getEsList', {
          condition : this.searchword,
          from: this.currentPage,
          size: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.addShow = false;
            this.secondshow = false;
            this.type = null;
            this.currentRow = null;
            this.tableData = res.data.data.voList;
            this.totalcount = res.data.data.totalNum;
          }
        })
      },
      seedetails(val) {
        this.detailcode = val;
        this.addShow = true;
        this.secondshow = true;
        this.secondtitle = "查看简历详情";
        this.type = 1;
      },
      search(){
        this.currentPage = 1;
        this.getPushedResumes();
      },
      //点击表格行，获取当前行的数据
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //改变表格的页面展示数量
      handleSizeChange(val) {
        this.pagesize = val;
        this.getPushedResumes();
      },
      //修改当前表格页数
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.getPushedResumes();
      },
      tableshow(row) {
        this.addShow = false;
        this.secondshow = false;
        this.$refs.singleTable.setCurrentRow(row);
        this.type = null;
      },
      diaClose(){
        this.dialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      watchResume(val){
        this.textHtml = val;
        this.dialogVisible = true;
        document.documentElement.style.overflow = "hidden";
      },
    },
    components: {
      ResumeDetail,
    },
    watch: {
      'searchword': function (val) {
        if (val == '') {
          this.currentPage = 1;
          this.getPushedResumes();
        }
      }
    }
  }
</script>

<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  
  .textactive {
    color: #1099ff;
  }
  
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .other {
    color: #1198ff;
    cursor: pointer;
    text-decoration: none;
  }
  
  a {
    text-decoration: none;
    color: #1099ff;
  }
  .container{
    text-align: left;
    padding-left:67px;
    width:100%;
    min-height:100px;
  }
  .container div{
    margin-right:20px;
  }
</style>
